<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}

        .context-menu-content {
            background-color: white;
        }
    </style>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=effff8de239e3c06c98cd3c45694afcc">
    </script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom:11,//级别
        center: [103.503946,30.183022],//中心点坐标
        viewMode:'3D'//使用3D视图
    });
    
    addMarker(1, [103.308475,30.34672]);

    // 事件绑定
    function clickOn() {
        map.on('click', showInfoClick);
    }
    // 解绑事件
    function clickOff(){
        map.off('click', showInfoClick);
//        map.off('dblclick', showInfoDbClick);
//        map.off('mousemove', showInfoMove);
    }
    function showInfoClick(e){
        var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！'
        console.log(text)
        addMarker('', e.lnglat, 'blue')
    }

    function addMarker(no, loc, color) {
        // 点标记显示内容，HTML要素字符串
        var svg =
            '<svg t="1590244910680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7218" width="30" height="40"> \
            <path d="M896 384c0 249.6-384 640-384 640S128 633.6 128 384s172.8-384 384-384S896 134.4 896 384z" \
            p-id="7219" fill="{fill}"></path></svg>';
        svg = svg.replace(/{fill}/, color || 'blue');
        var markerContent= '<div style="text-align: center;">' +
            '<span style="position: relative; top: 25px; color: white">'+ no +'</span>'+ svg +'</div>'
        var marker = new AMap.Marker({
            position: loc,
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(-13, -30)
        });
        setMarkerMenu(marker)
        // 将 markers 添加到地图
        map.add(marker);
    }


    var currentMarker, currentMarkerPosition;
    function setMarkerDrag(flag) {
        currentMarker.setDraggable(flag || true)
    }
    // 清除 marker
    function clearMarker() {
        map.remove(currentMarker);
    }

    // 菜单内容
    //创建右键菜单
    var contextMenu = new AMap.ContextMenu();
    contextMenu.addItem("更改位置", function () {
        setMarkerDrag(true)
    }, 0);
    contextMenu.addItem("删除位置", function () {
        clearMarker()
    }, 1);
    //地图绑定鼠标右击事件——弹出右键菜单
    function setMarkerMenu(marker) {
        marker.on('rightclick', function (e) {
            console.log('rightclick', e, this)
            currentMarker = this;
            contextMenu.open(map, e.lnglat);
            currentMarkerPosition = e.lnglat;
        });
    }
    /*map.on('rightclick', function (e) {
        contextMenu.open(map, e.lnglat);
        currentMousePosition = e.lnglat;
    });*/

    //右键添加Marker标记
    /*contextMenu.addItem("添加标记", function (e) {
        var marker = new AMap.Marker({
            map: map,
            position: currentMousePosition //基点位置
        });
    }, 3);*/

</script>
</body>
</html>